<template>
	<div class="container">
		<header class="customHeaderStyle">
			<!--<router-link to="/main/integral">-->
				<div class="go-back" @click="goBack">
					<i></i>
					<i></i>
					<i></i>
				</div>
			<!--</router-link>-->
			<div class="headerCustomTitle">签到抽奖</div>
		</header>

		<div class="parent">
			<div style="height:3rem;"></div>
<div class="sub_1">
	<div class="prize01">
		<img :src="bannerBg" alt="">
	</div>
	<!-- <div class="prize02">
		<p class="prize_p">{{detail.rewardTitle}}</p>
		<img src="static/image/prize/prize04.png" alt="">
	</div> -->

</div>
<div class="sub_2">
	<img class="prize03" :src="imgUrl" alt="">
	<!-- <div class="prize03"  @click="tranform"> -->
	<div class="inner">
		<div class="model">

			<!--<img :src="index == 4 ? 'static/image/prize/btn01.png' : imgUrl_1" alt=""  :class="index == 4 ? 'select' : 'panel'"  @click=" index == 4 ? getGift(index) : ''" ref="change" :data-rid="fk(index,0)"> -->
			<div class="wrapper select" :data="0">
				<div class="sub"></div>
				<img :src="imgUrl_1" alt="" id="img_1" ref="bgImg">
				<div class="tip">
					<img src="" alt="">
					<p></p>
				</div>
			</div>
			<div class="wrapper select" :data="1">
				<div class="sub"></div>
				<img :src="imgUrl_1" alt="" id="img_2" ref="bgImg">
				<div class="tip">
					<img src="" alt="">
					<p></p>
				</div>
			</div>
			<div class="wrapper select" :data="2">
				<div class="sub"></div>
				<img :src="imgUrl_1" alt="" id="img_3" ref="bgImg">
				<div class="tip">
					<img src="" alt="">
					<p></p>
				</div>
			</div>
			<div class="wrapper select" :data="7">
				<div class="sub"></div>
				<img :src="imgUrl_1" alt="" id="img_8" ref="bgImg">
				<div class="tip">
					<img src="" alt="">
					<p></p>
				</div>
			</div>
			<div class="wrapper" @click="getGift">
				<img src="static/image/prize/btn01.png" alt="">
			</div>
			<div class="wrapper select" :data="3">
				<div class="sub"></div>
				<img :src="imgUrl_1" alt="" id="img_4" ref="bgImg">
				<div class="tip">
					<img src="" alt="">
					<p></p>
				</div>
			</div>
			<div class="wrapper select" :data="6">
				<div class="sub"></div>
				<img :src="imgUrl_1" alt="" id="img_7" ref="bgImg">
				<div class="tip">
					<img src="" alt="">
					<p></p>
				</div>
			</div>
			<div class="wrapper select" :data="5">
				<div class="sub"></div>
				<img :src="imgUrl_1" alt="" id="img_6" ref="bgImg">
				<div class="tip">
					<img src="" alt="">
					<p></p>
				</div>
			</div>
			<div class="wrapper select" :data="4">
				<div class="sub"></div>
				<img :src="imgUrl_1" alt="" id="img_5" ref="bgImg">
				<div class="tip">
					<img src="" alt="">
					<p></p>
				</div>
			</div>
		</div>

	</div>
</div>
<div class="sub_3">
	<p @click="model=true;model_rewardDesc=true;">抽奖规则</p>
</div>
</div>
<div class="rule_model" @click="model=false;model_span=false;model_rewardDesc=false;" v-if="model">
	<div class="rule_model_1" v-if="model_rewardDesc && !model_span">
		<article v-html="detail.rewardDesc">
		</article>
	</div>
	<div class="rule_model_2" v-if="model_span">
		<!-- <span class="model_span_0"></span> -->
		<!-- <span class="model_span_1">恭喜你!</span> -->
		<span class="model_span_2">{{prizeItem.itemName}}</span>
		<img :src="prizeItem.rewadImg" alt="">
		<!-- <span class="model_span_4">确定</span> -->
	</div>

</div>
</div>

</template>
<script>
	import {
		getRewardRuleAndDetailForHome,//获取抽奖规则及详情讯息
		getRandomRewardItem,//提交某用户抽奖记录
		getSignRewardToday,
		getUserIntegral,
		getTodayRewardResultDetailForHome,//查询是否可以抽奖
	} from '../../api/wxh/getData.js'
	import { Toast } from '../../utils/toast.js'
	export default {
		data() {
			return {
				imgUrl: 'static/image/prize/bg01.png',
				imgUrl_1: 'static/image/prize/bg03.png',
				bannerBg: 'static/image/prize/prize01.png',
				flag: true,
				i: 0,
				j: '',
				k: 0,
				time: 100,
				detail: '',
				rewadImg: '',
				prizeId: '',
				model: false,
				model_rewardDesc: false,
				model_span: false,
				prizeItem: '',
				Rid: '',
				lock: false,
				clickLock: true//加锁，防止多次点击;
			}
		},
		computed: {

		},
		async created() {

			let req = await getRewardRuleAndDetailForHome('rewardCode=' + this.$route.query.rewardCode);
			if (req.returnCode == 1) {
				this.detail = req.data[0];
				this.bannerBg = this.detail.bannerImg;
			}
			let arr = document.getElementsByClassName("select");
			for (let i = 0; i < arr.length; i++) {
				arr[i].children[2].children[0].setAttribute('src', this.detail.rewardItemList[i].rewadImg);
				arr[i].children[2].children[1].innerText = this.detail.rewardItemList[i].itemName;
				arr[i].setAttribute('data-rid', this.detail.rewardItemList[i].rid);
			}

		},
		mounted() {
			console.log('clickLock', this.clickLock)
		},
		methods: {
			goBack(){
				window.history.go(-1);
			},
			async getGift() {
				console.log('clickLock', this.clickLock);
				if (!this.clickLock) return
				this.clickLock = false;

				let req = await getTodayRewardResultDetailForHome('rewardCode=' + this.$route.query.rewardCode + '&signRuleId=' + this.$route.query.ruleId);
				if (req.returnCode === 1 && req.data) {
					if (req.data[0].remainRewardAccount === 0) {
						Toast({
							message: req.data[0].remainRewardMsg,
							type: 'warn',
							duration: window.api.alertTime_2
						})
						this.clickLock = true;
						return
					}
				} else if (req.returnCode === 0) {
					Toast({
						message: req.msg,
						type: 'warn',
						duration: window.api.alertTime_2
					})
					this.clickLock = true;
					return
				}

				let res = await getRandomRewardItem("rewardId=" + this.detail.rid + "&signDetailId=" + this.$route.query.rid);
				if (res.returnCode == 0) {
					Toast({
						message: res.msg,
						type: 'warn',
						duration: window.api.alertTime_2
					})
					this.clickLock = true;
					return
				}
				this.prizeId = res.data[0].rid;
				this.prizeItem = res.data[0];
				// this.getRid();
				this.tranform();
			},
			tranform(index) {
				// if(index != 4){return}
				let arr = ['static/image/prize/bg01.png', 'static/image/prize/bg02.png'];
				// if(!this.flag){return false};
				setInterval(() => {
					this.imgUrl = this.imgUrl == arr[0] ? arr[1] : arr[0];
				}, 300)
				// this.flag =  false;
				this.bgChange();
			},
			bgChange() {
				if (this.k >= 16) {
					this.time += 50;
				}
				if (this.i > 7) {
					this.i = 0;
				}
				let arr = document.getElementsByClassName("select");
				setTimeout(() => {
					for (let w = 0; w < arr.length; w++) {

						if (arr[w].getAttribute("data") == this.i) {
							let a = document.getElementsByClassName("sub");
							for (let val of a) {
								val.style.display = "none";
							}
							arr[w].children[0].style.display = "block";
							if (this.k >= 16 && arr[w].getAttribute("data-rid") == this.prizeId) {
								this.lock = true;
								break;
							}
						}
					}

					if (this.lock) {
						this.model = true;
						this.model_span = true;
						this.clickLock = true;
						Promise.all([getSignRewardToday('signRuleId=' + this.$route.query.rid), getUserIntegral()]);
						return
					}
					this.i++;
					this.k++;
					this.bgChange();
				}, this.time)

			},
		}
	}
</script>
<style scoped>
.customHeaderStyle{
		position: relative;
		background: #fff;
		min-height: 3rem;
		border-bottom: 1px solid #eaeaea;
		color: #444;
		font-weight: 700;
		left: 0;
		top: 0;
		line-height: 2.25rem;
		/* z-index: 2; */
		width: 100%;
		font-size: .9rem;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	.headerCustomTitle{
		overflow: hidden;
		right: 6rem;
		font-weight: 500;
		min-height: 2.25rem;
		position: absolute;
		margin: 0;
		text-align: left;
		white-space: nowrap;
		left: 3rem;
		width: auto;
		text-overflow: ellipsis;
		z-index: 2;
		font-size: 1.1rem;
		margin-top: .35rem;
		top: 1px;
	}
	.container {
		background: #fff;
		height: 100%;
		width: 100%;
	}
	.parent  .prize02,.prize03 {
		margin: auto;

	}
	.prize01 {
		/*background: url(../../../static/image/prize/prize01.png)  center no-repeat;
		background-size: 100% 100%;*/
		width: 100%;
		height: 13rem;

	}
	.prize_p {
		position: absolute;
		top: .3rem;
		left: .9rem;
		width: 100%;
		color: #fff;
	}
	.prize02 {
    width: 63%;
    position: absolute;
    left: 18%;
    top: 9.5rem;
	}
	.prize03 {
		width: 100%;
		height: 100%;
	}
	.parent {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		background:#a8e6dd;
		/*background: -webkit-linear-gradient(#ffda39, #efad08);
	  background: -o-linear-gradient(#ffda39, #efad08);
	  background: -moz-linear-gradient(#ffda39, #efad08);
	  background: linear-gradient(#ffda39, #efad08);*/
	}
	.sub_1, .sub_2 {
		position: relative;
	}
	.sub_2 {
		width: 85%;
    height: 41%;
		margin:auto;
	}
	.sub_3 {
		text-align: left;
		padding-left: 2rem;
		margin-bottom: 1rem;

	}
	.sub_3 > p  {
		color: #4e95e3  !important;
	}
	.inner {
		position: absolute;
		top:6%;
		left:5%;
		width: 90%;
		height: 90%;		
	}
	.model {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
	}

	.wrapper {
		width: 32%;
		height: 30%;
		/*margin-right:0.05rem;*/
		/*margin-bottom:0.05rem;*/
		position: relative;
		/*flex: 1 1 auto;*/
	}
	.wrapper>img {
		width: 100%;
		height: 100%;
	}
	.sub {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		position: absolute;
		background: rgba(254, 66, 54, 0.3);
		display: none;
		z-index: 999;
	}

	.tip {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 888;
		display: flex;
		flex-direction: column;
		justify-content: center;
		top: 0;
		left: 0;
		padding: .5rem;
	}
	.tip img {
		/* max-width: 80%; */
		height: 60%;
		margin: auto;
	}
  .tip p {
    color: #fe4236;
  }
	.rule_model {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		position: absolute;
		z-index: 99999;
		top: 0;
		left: 0;
		color: #000;
	}
	.rule_model_1 {
		width: 80%;
		height: auto;
		max-height: 80%;
		margin: auto;
		background: rgba(255, 255, 255, 1);
		position: absolute;
		top: 50%;
		left: 50%;
    transform: translate3d(-50%, -50%, 0);
    transition: .2s;
    border-radius: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    /*white-space: nowrap ;*/
    word-break: break-all;
    min-height: 25%;
    text-align: left;
    padding: 1rem;
	}
	.rule_model_2 {
		width: 70%;
		height: 30%;
		background: url('../../../static/image/prize/prize_01.png');
		background-repeat: no-repeat;
    background-size: 100% 100%;
		position: absolute;
		top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    transition: .2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 1rem;
	}

	.rule_model_2 span {
		display: block;
		height: 1.5rem;
	}
	.rule_model_2 img {
		max-width: 80%;
		height: 60%;
		margin: auto;
	}
	.model_span_1 {
		font-weight: 500;
		font-size:18px;
	}
	.model_span_2 {
		color: #fc2e2e;
		font-size: 1rem;
	}
	.model_span_3 {
		color: #a29e9e;
	}
	.model_span_4 {
		color: #fff;
		line-height: 1.5rem;
	}
	.article {
		position: absolute;
		top: 50%;
		transform: translateY(-50%)
	}
</style>